import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined
} from '@ant-design/icons';
import { Avatar,Dropdown,Layout } from 'antd';
import React, { useEffect, useState } from 'react'
// import PubSub from 'pubsub-js';
import { useNavigate} from 'react-router-dom';
import axios from 'axios';
import {connect} from 'react-redux'
const { Header} = Layout;

function TopHeader(props) {
  console.log(props);
  const navigate =useNavigate();
  const[collapsed,setCollapsed]=useState(true)
  const changeCollapsed=()=>{
    // setCollapsed(!collapsed)
    // PubSub.publish("changeCollapsed",collapsed)
    props.changeCollapsed()
  }
useEffect(()=>{
  axios.get("http://localhost:8000/rights").then(res=>{
    // console.log(1);
    // console.log(res);
  })
},[])
  const {role:{roleName},username}=JSON.parse(localStorage.getItem('token'))
  const handleMenuClick: MenuProps['onClick'] = e => {
    if (e.key === 'item-2') {
      localStorage.removeItem("token")
      navigate('/Login')
    }
  };
  const items = [
    { label: roleName, key: 'item-1' }, // 菜单项务必填写 key
    { label: '退出', key: 'item-2' }
    ]

//   const menu = (
//     <Menu>
//         <Menu.Item>
//             超级管理员
//         </Menu.Item>
//         <Menu.Item danger onClick={()=>{
//             localStorage.removeItem("token")
//             // console.log(props.history)
//             props.history.replace("/login")
//         }}>退出</Menu.Item>
//     </Menu>
// );

  return (
    <Header className="site-layout-background" style={{ padding: '0 16px' }}>
   { 
   props.isCollapsed?<MenuUnfoldOutlined onClick={changeCollapsed}/>:<MenuFoldOutlined onClick={changeCollapsed}/>
    }
    <div style={{float:'right'}}>
      <span>欢迎<span style={{color:'#1890ff'}}>{username}</span>回来</span>
      <Dropdown menu={{
        items, onClick: handleMenuClick}}>
      <Avatar icon={<UserOutlined />} />
     </Dropdown>
      
    </div>
  </Header>
  )
}
const mapStateToProps=({CollApsedReducer:{isCollapsed}})=>{
  return{
    isCollapsed
  }
}
const mapDispatchToProps={
  changeCollapsed(){
    return{
      type:'change-collapsed'
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(TopHeader)